<template>
  <div class="view">
    <div class="content">
      <user-header :data="user" @gotoOther="gotoOther"></user-header>
      <!-- <card class="collect-card">
        <div slot="content"
             class="card-grid-flex">
          <div class="vux-1px-r"
               @click="$router.push('/myCollectionGoods')">
            <p>{{ user.goods_collectnum || 0 }}</p>
            商品收藏
          </div>
          <div class="vux-1px-r"
               @click="$router.push('/myCollectionPackage')">
            <p>{{ user.package_collectnum || 0 }}</p>
            套餐收藏
          </div>
          <div @click="$router.push('/myCollectionSeller')">
            <p>{{ user.seller_collectnum || 0 }}</p>
            店铺关注
          </div>
        </div>
      </card> -->
      <card class="grid-card">
        <cell slot="header" class="vux-1px-b" title="我的订单" value="全部订单" is-link @click.native="gotoOrder(-1)"></cell>
        <div slot="content"
             class="card-grid-flex">
          <div @click="gotoOrder(1)">
            <p><i class="unpaid-icon order-icon"></i></p>
            待付款
          </div>
          <div @click="gotoOrder(2)">
            <p><i class="fahuo-icon order-icon"></i></p>
            待发货
          </div>
          <div @click="gotoOrder(3)">
            <p><i class="shouhuo-icon order-icon"></i></p>
            待收货
          </div>
          <!-- <div @click="gotoOrder(200)">
            <p><i class="not-evaluated-icon order-icon"></i></p>
            待评价
          </div> -->
          <div @click="gotoAfterSale()">
            <p><i class="customer-service-icon order-icon"></i></p>
            退换/售后
          </div>
        </div>
      </card>

      <card class="grid-card">
        <cell slot="header"
              class="vux-1px-b"
              title="我的财富"></cell>
        <div slot="content"
             class="card-grid-flex">
          <div @click="$router.push({path: '/myPackage', query: {tab: 1}})">
            <p><i class="vip-icon icon"></i></p>
            套餐
          </div>
          <div @click="$router.push({path: '/myCoupon', query: {tab: 0}})">
            <p><i class="coupon-icon icon"></i></p>
            优惠券
          </div>
          <div @click="$router.push({path: '/myrelationship', query: {tab: 0}})">
            <p><i class="relationship-icon icon"></i></p>
            朋友圈
          </div>
          <div @click="$router.push({path: '/mytransaction', query: {tab: 0}})">
            <p><i class="activity-icon icon"></i></p>
            活动商品
          </div>
<!--          <div @click="$router.push({path: '/p2pbillingdetails'})">-->
<!--            <p><i class="activity-icon icon"></i></p>-->
<!--            活动商品-->
<!--          </div>-->
<!--          <div @click="weChatShare()">-->
<!--            <p><i class="activity-icon icon"></i></p>-->
<!--            分享-->
<!--          </div>-->
<!--          <div @click="createLnk('https://pt.axccn.cn/', '赞佳乐')">-->
<!--            <p><i class="activity-icon icon"></i></p>-->
<!--            快捷方式-->
<!--          </div>-->
          <div v-if="user.account_level_id >= 3"
               @click="$router.push({path: '/myactivity', query: {tab: 0}})">
            <p><i class="activity-icon icon"></i></p>
            业绩奖励
          </div>
        </div>
      </card>

      <!-- <card class="grid-card margin-bottom">
        <cell slot="header"
              class="vux-1px-b"
              title="汽车服务"></cell>
        <div slot="content"
             class="card-grid-flex">
          <div @click="$router.push('/myCar')">
            <p><i class="car-insurance-icon icon"></i></p>
            我的爱车
          </div>
          <div @click="gotoUsedcar()">
            <p><i class="usedcar-icon icon"></i></p>
            二手车
          </div>
          <div @click="gotoRentcar()">
            <p><i class="rentalcar-icon icon"></i></p>
            租车
          </div>
        </div>
      </card>
      <card class="grid-card">
        <cell slot="header"
              class="vux-1px-b"
              title="其他服务"></cell>
        <div slot="content"
             class="card-grid-flex">
          <div @click="gotoJob()">
            <p><i class="job-icon icon"></i></p>
            求职
          </div>
          <div @click="gotoTransfer()">
            <p><i class="transfer-icon icon"></i></p>
            转让
          </div>
          <div @click="gotoSellerRegister()">
            <p><i class="sellerreg-icon icon"></i></p>
            商家入驻
          </div>
          <div @click="gotoSeller()"
               v-if="user.user_type===1">
            <p><i class="sellerhome-icon icon"></i></p>
            商家中心
          </div>
        </div>
      </card> -->
    </div>
    <footer-nav></footer-nav>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import footerNav from '@comps/footerNav'
import userHeader from '@comps/header/userHeader'
import { Cell, Group, Card } from 'vux'

export default {
  components: {
    footerNav,
    userHeader,
    Group,
    Cell,
    Card
  },
  computed: {
    ...mapState(['user', 'token'])
  },
  methods: {
    createLnk (sUrl, sName) {
      try {
        // eslint-disable-next-line no-undef
        let WshShell = new ActiveXObject('WScript.Shell')
        let oUrlLink = WshShell.CreateShortcut(WshShell.SpecialFolders('Desktop') + '\\' + sName + '.url')
        oUrlLink.TargetPath = sUrl
        oUrlLink.Save()
      } catch (e) {
        console.log('当前IE安全级别不允许操作！')
      }
    },
    weChatShare () {
      // api分享
      this.$weChatShare({
        name: 'webpage',
        params: {
          apikey: 'wx52200843840f4b19',
          scene: 'session',
          title: '百度',
          description: '百度一下，你就知道！',
          contentUrl: 'https://www.baidu.com'
        }
      })
      // SDK分享
      this.$weChatShare({
        name: 'chat',
        params: {
          title: '百度',
          desc: '百度一下，你就知道！',
          link: 'https://hxapi.axccn.cn/index.html#/home',
          imgUrl: 'http://img.zanjl.com/content/img/default/login_car_logo.png'
        }
      })
      // this.$wxSdkShareChat({
      //   title: '百度',
      //   desc: '百度一下，你就知道！',
      //   link: 'https://hxapi.axccn.cn/index.html#/home',
      //   imgUrl: 'http://img.zanjl.com/content/img/default/login_car_logo.png'
      // }).then((res) => {
      //   // this.$toastText(res)
      //   console.log('res', res)
      //   console.log('succeed')
      // }).catch((err) => {
      //   // this.$toastText(err)
      //   console.log('err', err)
      //   console.log('error')
      // })
    },
    gotoSellerRegister () {
      if (this.user.user_type === 1) {
        this.$router.push('/sellerRegisterStep3')
      } else if (this.user.user_type === 2) {
        this.$router.push('/sellerRegister')
      }
    },
    gotoOrder (status) {
      this.$router.push({
        path: '/myOrder',
        query: {
          tab: status
        }
      })
    },
    gotoAfterSale () {
      this.$router.push('/myRefund')
    },
    gotoJob () {
      this.$router.push('/myJob')
    },
    gotoTransfer () {
      this.$router.push('/myTransfer')
    },
    gotoUsedcar () {
      this.$router.push('/myUsedcar')
    },
    gotoRentcar () {
      this.$router.push('/myRentcar')
    },
    gotoCarSticker () {
      this.$router.push('/myCarSticker')
    },
    gotoSeller () {
      this.$router.push('/main')
    },
    gotoOther () {
      let redirUrl = 'https://hxapi.axccn.cn'
      redirUrl += '?source=axc'
      if (this.token) {
        redirUrl += '&token=' + this.token
      }
      if (this.user.user_id) {
        redirUrl += '&uid=' + this.user.user_id
      }
      if (this.user.first_header) {
        redirUrl += '&first_header=' + this.user.first_header
      }
      console.log(redirUrl)
      location.href = redirUrl
    }
  },
  created () {
  },
  activated () {
    this.$store.dispatch('getUserInfo')
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/pub";

.content {
  height: calc(100% - #{$default_tabbar_height});
}

.title {
  font-size: $default_font_size;
  font-weight: normal;
}

.header-wrapper {
  position: relative;
  height: 4.95rem;
  background-image: url("http://img.zanjl.com/Content/img/image/headbackimg.png");
  background-size: cover;
}
.withoutUser {
  position: relative;
  > * {
    position: relative;
    z-index: 2;
  }
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, .5);*/
  }
}

.collect-card {
  margin-top: 0;
  .card-grid-flex {
    display: flex;
    padding: .25rem 0;
    line-height: .6rem;
    div {
      flex: 1;
      text-align: center;
      font-size: $default_middlefont_size;
      color: $default_subtitle_color;
    }
    p {
      font-size: $default_font_size;
      color: $default_font_color;
    }
  }
}

.grid-card {
  .vux-1px-b:after {
    border: .025rem solid $default_border_color;
  }
  .card-grid-flex {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    padding-top: .375rem;
    div {
      width: 20%;
      margin-bottom: .375rem;
      text-align: center;
      font-size: $default_middlefont_size;
    }
  }
}

.order-icon {
  margin-bottom: .25rem;
  width: .85rem;
  height: .775rem;
}

.icon {
  margin-bottom: .25rem;
  width: .6rem;
  height: .6rem;
}

.row {
  i {
    margin-right: .25rem;
  }
}
</style>
